<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示隐藏元素之display</title>
    <style>
        .peppa {
            display: none;
            /* // display: block 除了转换为块级元素还可以显示元素  display隐藏后不再占有位置*/
            display: block;
            width: 500px;
            height: 200px;
            background-color: pink;
        }
        
        .george {
            /* visibility: hidden;隐藏后继续占有位置 */
            visibility: hidden;
            height: 200px;
            width: 300px;
            background-color: skyblue;
        }
        
        .didi {
            height: 200px;
            width: 300px;
            background-color: #8080ff;
        }
        
        .gundong {
            overflow: visible;
            /* overflow: hidden; */
            /* overflow: scroll; 超出范围显示滚动条 不超出范围也显示滚动条*/
            /* 超出范围才显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            border: 3px solid burlywood;
            margin: 50px 100px;
        }
    </style>
</head>

<body>
    <div class="peppa">佩奇</div>
    <div class="george">乔治</div>
    <div class="didi">乔治2</div>
    <div class="gundong">
        理想的消毒剂应具备杀菌谱广、杀菌能力强、作用速度快、稳定性好、毒性低、腐蚀性 、刺激性小（应该是无毒、无残留、无腐蚀、无刺激）、易溶于水、对人和动物安全及价廉易得、对环境污染程度低等特点。今后有关科研、生产单位应根据市场需要从合成新化合物、溶媒选择、合理复配、生产工艺等多方位、多角度研发新型消毒剂，全面提高我国消毒剂的科技含量，在发展壮大消毒剂行业的同时，向社会提供更多更好的产品，满足疫病控制工作需要和市场需求，为人类造福。
    </div>
</body>

</html>